<template>
	<view class="content">
		<div class="swiperDiv">
			<uni-search-bar placeholder="搜索" v-model="searchValue" @confirm="search" cancelButton="none">
				<template v-slot:searchIcon>
					<image src="../../static/common/img1-1.png" mode="widthFix" style="width: 36rpx;"></image>
				</template>
			</uni-search-bar>
		</div>
		<div class="bot-msg">

			<uni-row>
				<uni-col :span="24">
					<div class="scrollView">
						<scroll-view class="scroll-view" scroll-y="true" :show-scrollbar="false" enhanced>
							<z-paging ref="paging" :fixed="false" v-model="list" @query="queryList">
								<view class="scroll-view-item" v-for="(item,index) in list" :key="index">{{item.name}}
								</view>
							</z-paging>
						</scroll-view>
					</div>
				</uni-col>
			</uni-row>

		</div>
	</view>

</template>

<script>
	export default {

		data() {
			return {
				searchValue: '',
				current: [],
				list: [{
						name: '内科',
						isActive: false
					},
					{
						name: '外科',
						isActive: false
					},
					{
						name: '妇产科',
						isActive: false
					},
					{
						name: '耳鼻喉科',
						isActive: false
					},
					{
						name: '眼科',
						isActive: false
					},
					{
						name: '医疗美容科',
						isActive: false
					},
					{
						name: '牙科',
						isActive: false
					},
					{
						name: '儿科',
						isActive: false
					},
					{
						name: '内科',
						isActive: false
					},
					{
						name: '外科',
						isActive: false
					},
					{
						name: '妇产科',
						isActive: false
					},
					{
						name: '耳鼻喉科',
						isActive: false
					},
					{
						name: '眼科',
						isActive: false
					},
					{
						name: '医疗美容科',
						isActive: false
					},
					{
						name: '牙科',
						isActive: false
					},
					{
						name: '儿科',
						isActive: false
					}
				]

			}
		},
		onShow() {

		},
		onLoad(options) {
			console.log(options,"options")
			this.searchValue=options.value
		},
		methods: {
			search(res) {
				uni.showToast({
					title: '搜索：' + res.value,
					icon: 'none'
				})
			},
			scrollView(val) {
				this.list.forEach((item, index) => {
					if (val == index) {
						item.isActive = true
					} else {
						item.isActive = false
					}
				})
			},
			queryList(pageNo, pageSize) {
				this.$refs.paging.complete(this.list);
				// // 此处请求仅为演示，请替换为自己项目中的请求
				//             this.$request.queryList({ pageNo,pageSize }).then(res => {
				// 	// 将请求结果通过complete传给z-paging处理，同时也代表请求结束，这一行必须调用
				//             	this.$refs.paging.complete(res.data.list);
				//             }).catch(res => {
				//             	// 如果请求失败写this.$refs.paging.complete(false)，会自动展示错误页面
				//             	// 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
				//             	// 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
				//             	this.$refs.paging.complete(false);
				//             })
			}
		},
		mounted() {

		}
	}
</script>

<style scoped>
	.swiperDiv {
		height: 500rpx;
		background-color: #1648ce;
	}

	.bot-msg {
		position: absolute;
		top: 144rpx;
		width: 100%;
		height: calc(100% - 144rpx);
		background-color: #fff;
		border-top-right-radius: 70rpx;
	}

	.bot-msg-btn {
		width: 94%;
		margin: 0 auto;
		margin-top: 20rpx;
	}

	/deep/ .uni-row {
		height: 96%;
		width: 100%;
	}

	/deep/ .uni-col-24 {
		height: 100%;
		width: 100%;
		
	}

	.scrollView {
		height: 100%;
		width: 100%;
		
	}

	.scroll-view {
		height: 100%;
		width: 100%;
		
	}

	.scroll-view-item {
		height: 96rpx;
		
		font-size: 24rpx;
		font-weight: 600;
		color: #1648CE;
		margin: 0rpx 72rpx;
		line-height: 96rpx;
		border-bottom:2rpx solid #F2F4F5;
	}

	.scroll-view-item:active {
		background-color: #F5FAFF;
		
	}
	

	/deep/ .uni-searchbar__box {
		border-radius: 50rpx !important;
	}

	/deep/ .uni-searchbar {
		padding: 36rpx 24rpx;
	}
</style>